<template>
  <div class="content">
    <el-row>
      <el-col :span="5">
        <div class="departLeft">
          <el-form>
            <el-form-item class="search_box">
              <el-input placeholder="请输入机构名称" v-model="input2">
              </el-input>
              <el-button
                type="primary"
                @click="getDepartSearchMentMessage()"
                icon="el-icon-search"
              ></el-button>
            </el-form-item>
            <el-form-item></el-form-item>
            <!-- <el-tree 
              :data="selectData" 
              :props="defaultProps" 
              @node-click="getHalfCheckedKes">
              </el-tree> -->
            <el-tree
              :data="selectData"
              ref="tree"
              node-key="orgCode"
              :props="defaultProps"
              @node-click="getHalfCheckedKes"
              :check-on-click-node="false"
              :expand-on-click-node="false"
            >
            </el-tree>
          </el-form>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="departRight">
          <el-tabs v-model="activeName">
            <div class="UserConfig">
              <deparBlank
              :currentSelectNode ="currentSelectNode"
              :tableData_1 ="tableData"
              ></deparBlank>
            </div>
          </el-tabs>
        </div>
          
      </el-col>
    </el-row>
  </div>
</template>
<script>
import deparBlank from "@/components/liangliang/deparBlank";
import { getDepartMent, getDepartMentdicry ,getRightMessage} from "@/api/departManagement";
export default {
  components: {
    deparBlank,
  },
  mounted() {
    let _self = this;
    _self.getDepartMentMessage();
  },
  data() {
    return {
      currentSelectNode: [],
      formInline: {
        user: "",
      },
      activeName: "departmentInformation",
      tableData:[],
      selectData: [],
      input2: "",
      defaultProps: {
        children: "children",
        label: "departName",
      },
    };
  },
  methods: {
    getDepartMentMessage() {
      let _self = this;
      _self.currentSelectNode = [];
      getDepartMent().then((res) => {
        console.log(res.result);
        // let depart = res.result;
        _self.selectData = res.result;
      });
    },
//  节点被点击时页面右边信息获取
    getHalfCheckedKes(a, b, c) {
      let _self = this;
      _self.currentSelectNode = [];
      _self.currentSelectNode.push({
        parentName: b.parent.data.departName,
        currentId: a.orgCode,
        currentName: b.data.departName,
      });
      let data = {
        orgCode:_self.currentSelectNode[0].currentId
      }  
    //   console.log(data.orgCode);
      getRightMessage(data).then((res)=>{
        if(res.code == 200){
            _self.tableData = res.result.records;
        }
        
      })
    //   console.log(_self.tableData)
    //   console.log(a.orgCode);
    //   // console.log(b.parent.data.departName);//  父级名字
    //   console.log(_self.currentSelectNode);
    //   console.log(_self.departForm);
    },
    //部门查询
    getDepartSearchMentMessage() {
      let _self = this;
      console.log(111);
      let data = {
        input2: _self.input2,
      };
      if (_self.input2 != "") {
        getDepartMentdicry(data).then((res) => {
          // console.log(res.result);
          let depart = res.result;
          _self.selectData = depart;
        });
      } else {
        getDepartMent().then((res) => {
          console.log(res.result);
          let depart = res.result;
          _self.selectData = res.result;
        });
      }
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.content{
    background: #f0f2f5;
    height: 800px;
    .departLeft {
      background-color: #ffffff;
      padding: 20px;
      margin-right: 10px;
      .el-form-item{
        margin-bottom: 8px;
      }
      .search_box{
        width: 72%;
        white-space: nowrap;
        .el-input{
          margin-right: 5px;
        }
      }
    }
    .departRight{
      background-color: #ffffff;
      padding: 20px 20px 30px 20px;
    }
}
</style>